<template>
  <div class="container">
    <div class="container-tops flex between align-center">
      <div class="left flex align-center">
        <img class="img-logo" src="../../assets/image/print.png" alt="" />
        <span class="title">打印工作站管理</span>
      </div>
      <div class="center flex-1">
        <a-menu v-model:selected-keys="mainState.current" @click="changeRouter" mode="horizontal">
          <a-menu-item key="print/manage">
            <template #icon>
              <printer-filled />
            </template>
            打印机管理
          </a-menu-item>
          <a-menu-item key="print/log">
            <template #icon>
              <clock-circle-outlined />
            </template>
            打印记录
          </a-menu-item>
          <a-menu-item key="print/problem/list">
            <template #icon>
              <code-filled />
            </template>
            问题反馈
          </a-menu-item>
        </a-menu>
      </div>
      <div class="right">
        <UserOutlined title="管理员信息" @click="heandleOpen('user')" />
        <!-- <lock-outlined title="锁定" :style="{fontSize: '18px'}" /> -->
        <div class="leftGroup">
          <a-dropdown>
            <a class="ant-dropdown-link" @click.prevent>
              <img class="seting" @click.prevent title="设置" @click="onChangeWindow('seting')"
                src="../../assets/image/set.png" alt="">
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item>
                  <a-popconfirm title="是否退出当前账号?" ok-text="Yes" cancel-text="No" @confirm="confirm" @cancel="cancel">
                    <a href="javascript:;">退出</a>
                  </a-popconfirm>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
        <MinusOutlined title="最小化" @click="onChangeWindow({
          key: 'toggle-fullscreen',
          value: 'unmaximize'
        })" />
        <BorderOutlined title="最大化" @click="onChangeWindow({
          key: 'toggle-fullscreen',
          value: 'maximize'
        })" />
        <CloseOutlined title="关闭" @click="onChangeWindow({
          key: 'close',
        })" />
      </div>
    </div>
    <div class="container-content">
      <router-view />
    </div>
    <a-modal class="user_hander" v-model:visible="mainState.userVisible" title="管理员信息" ok-text="确认" cancel-text="取消">
      <div class="user_content">
        <div class="user_content_l">
          <ul>
            <li>姓名：<span>{{ mainState.user.name }}</span></li>
            <li>账号：<span>{{ mainState.user.account }}</span></li>
            <li>单位：<span>{{ mainState.user.baseOrgName }}</span></li>
          </ul>
        </div>
        <div class="user_content_r">
          <a-button type="primary" size="large" @click="confirm">退出登录</a-button>
        </div>
      </div>
      <template #footer>
      </template>
    </a-modal>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, onBeforeUnmount } from 'vue'
import { message } from 'ant-design-vue'
import { MailOutlined, PrinterFilled, AppstoreOutlined, CodeFilled, MinusOutlined, ClockCircleOutlined, CreditCardOutlined, BorderOutlined, CloseOutlined, SettingOutlined, UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import api from '@renderer/api/print'
import { useRouter } from 'vue-router'
const router = useRouter()
const mainState = reactive({
  form: {
    pageNum: 1,
    pageSize: 999
  },
  userVisible: false,
  user: {},
  current: ['print/manage']
})

const heandleOpen = async (key) => {
  switch (key) {
    case 'user':
      mainState.user = await window.api.getStoreData('user-info')
      mainState.userVisible = true
      break;
    case 2:
      console.log(2);
      break;
  }
}
const onChangeWindow = (data) => {
  window.api
    .changeMain(data)
}
const changeRouter = ({ item, key, keyPath }) => {
  router.push(`/${key}`)
}
const confirm = () => {
  window.api.deleteUser()
  setTimeout(() => {
    router.push(`/`)
  }, 1000)
}
</script>
<style lang="scss" scope>
@use './index.scss' as vars;
</style>
